
<template>
  <div class="card-title">
    <div><strong>{{ title }}</strong> <small> {{ sub_title }} </small></div>
    <div style="display: flex">
      <div style="margin-right: 20px">
        <slot name="btns"></slot>
      </div>
      <el-select
          v-if="!show"
          v-model="selected"
          style="width: 140px"
      >
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </div>
  </div>

</template>

<script setup>
import {ref} from "vue";

defineProps(['title', 'sub_title','show'])

const selected = ref('2024')
const options = [
  {
    value: '2024',
    label: '2024',
  }
]

</script>



<style scoped lang="scss">
.card-title {
  padding: 10px 20px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 0;
    width: 4px;
    height: 20px;
    background-color: #0b63b7;
  }
}

</style>
